<template>
  <div>

    <el-dialog title="零售商每个省份的分布" :visible.sync="dialogShowRetailersVisible">
      <div id="main" style="width: 900px;height: 500px"></div>
    </el-dialog>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="零售商名称">
        <el-input v-model="formInline.name" clearable placeholder="零售商名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
      </el-form-item>
    </el-form>


    <el-button icon="el-icon-plus" @click="OpenAddRestailers(0)">添加</el-button>
    <el-button @click="open" type="success">导入</el-button>
    <el-button icon="el-icon-download" @click="OpenretailersExcel" type="info">导出</el-button>
    <el-button @click="OpnePDF" type="warning">导出PDF</el-button>
    <el-button @click="OpenRetailersEchar" type="danger">展示ECHAR</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="retailerId"
          label="零售商ID"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="零售商名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="address"
          label="零售商地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="contactInfo"
          label="联系信息，如电话、邮箱"
          width="120">
      </el-table-column>
      <el-table-column
          prop="location"
          label="地理位置"
          width="120">
      </el-table-column>
      <el-table-column
          prop="storeTypeName"
          label="店铺类型"
          width="120">
      </el-table-column>
      <el-table-column
          prop="opeingHours"
          label="营业时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="inventoryLevel"
          label="库存水平"
          width="120">
      </el-table-column>
      <el-table-column
          prop="pname"
          label="商品名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="pdescription"
          label="商品描述"
          width="120">
      </el-table-column>
      <el-table-column
          prop="pprice"
          label="商品价格"
          width="120">
      </el-table-column>
      <el-table-column
          label="位置"
          width="120">
        <template v-slot="scope">
          {{scope.row.pdname}}/{{scope.row.cityName}}/{{scope.row.typeName}}
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="profitMargin"
          label="利润率"
          width="120">
      </el-table-column>
      <el-table-column
          prop="imageType"
          label="图片类型"
          width="120">
      </el-table-column>
      <el-table-column
          prop="picUrl"
          label="图片"
          width="120px">
        <template v-slot="scop">
          <el-image
              style="width: 100px; height: 100px"
              :src="scop.row.picUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="delRetailersById(scope.row.retailerId)"  type="text" size="small" icon="el-icon-delete">删除</el-button>
          <el-button @click="OpenAddRestailers(scope.row)"  type="text" size="small" icon="el-icon-edit">编辑 </el-button >
          <el-button @click="OpenWeather(scope.row.typeName)"  type="text" size="small" icon="el-icon-cloudy">查询天气</el-button >
<!--          <el-button @click="OpenBusinessLicense(scope.row.picUrl)"  type="text" size="small" icon="el-icon-tickets">查看营业执照详情</el-button >-->
        </template>
      </el-table-column>
    </el-table>

    <el-switch v-model="value">
    </el-switch>
    <el-pagination
        :hide-on-single-page="value"
        @size-change="goSize"
        @current-change="goPage"
        :current-page="current"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog :title="title"  :visible.sync="dialogFormVisible">
      <el-form  v-loading="loadFlag" :model="form" :rules="rules" ref="ruleForm" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="零售商名称" prop="name" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零售商地址" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系信息" :label-width="formLabelWidth">
              <el-input v-model="form.contactInfo" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地理位置" :label-width="formLabelWidth">
              <el-input v-model="form.location" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺类型" :label-width="formLabelWidth">
              <el-select v-model="form.storeTypeId" placeholder="请选择">
                <el-option
                    v-for="item in storeType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业时间" :label-width="formLabelWidth">
              <el-input v-model="form.opeingHours" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库存水平" :label-width="formLabelWidth">
              <el-input v-model="form.inventoryLevel" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-select v-model="form.productId" placeholder="请选择商品名称">
              <el-option
                  v-for="item in product"
                  :key="item.productId"
                  :label="item.name"
                  :value="item.productId">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="利润率" :label-width="formLabelWidth">
              <el-input v-model="form.profitMargin" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地" :label-width="formLabelWidth">
              <el-cascader
                  v-model="cityIds"
                  :options="citys"
                  :props="propsIs"
                  @change="cityChange"
                 clearable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="识别图片的类型" :label-width="formLabelWidth">
                <el-select v-model="form.imageType" placeholder="请选择">
                  <el-option label="营业执照" value="businessLicense"></el-option>
                  <el-option label="身份证" value="idCard"></el-option>
                  <el-option label="驾驶证" value="driverLicense"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片" :label-width="formLabelWidth">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8888/system/uploadRetailers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogWeatherTableVisible">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="风向:">
            <spen>{{realtime.direct}}</spen>
          </el-form-item>
          <el-form-item label="温度:">
            <spen>{{realtime.temperature}}</spen>
          </el-form-item><br>
          <el-form-item label="湿度:">
            <spen>{{realtime.humidity}}</spen>
          </el-form-item>
          <el-form-item label="天气情况:">
            <spen>{{realtime.info}}</spen>
          </el-form-item><br>
          <el-form-item label="风力:">
            <spen>{{realtime.power}}</spen>
          </el-form-item>
          <el-form-item label="空气质量指数:">
            <spen>{{realtime.aqi}}</spen>
          </el-form-item>
        </el-form>
    </el-dialog>

<!--    <el-dialog title="图片类型" :visible.sync="dialogImagesVisible">-->
<!--      <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--        <el-form-item>-->
<!--          <el-select v-model="value" placeholder="请选择">-->
<!--            <el-option label="营业执照" value="businessLicense"></el-option>-->
<!--            <el-option label="身份证" value="idCard"></el-option>-->
<!--            <el-option label="驾驶证" value="driverLicense"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="onSubmit">确定</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: "RetailersView",
  data() {
    return {
      value:false,
      tableData:[],
      current:1,
      size:3,
      total:0,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      dialogWeatherTableVisible:false,
      dialogImagesVisible:false,
      form:{
        name:'',
        address:'',
        contactInfo:'',
        location:'',
        storeType:'',
        opeingHours:'',
        inventoryLevel:'',
        productId:'',
        cityId:'',
        pid:'',
        type:'',
        profitMargin:'',
        imageType:'',
        imageUrl:'',
      },
      formInline:{
        name:''
      },
      product:[],
      citys:[],
      cityIds:[0,0,0],
      propsIs:
      {
        value:"id",
        label:"name",
        children:"children",
      },
      title:'添加零售商',
      dialogShowRetailersVisible:false,
      storeType:[],
      imageUrl:'',
      weatherData:{},
      realtime:{},
      picUrl:'',
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
      },
      imageType:'',
      loadFlag:false,
      // date:sessionStorage.getItem("date"),
      // direct:sessionStorage.getItem("direct"),
      // temperature:sessionStorage.getItem("temperature"),
      // weather:sessionStorage.getItem("weather"),
    }
  }, created() {
    this.getTableData();
    this.getProduct()
    this.getCityTree();
    this.getStoreType();
  }, methods: {
      // OpenBusinessLicense(picUrl){
      //   this.dialogImagesVisible=true;
      //   console.log(picUrl);
      //   this.picUrl=picUrl;
      // },
      //生成PDF
      OpnePDF(){
        window.open("http://localhost:9017/pdf");
      },
      doOCR(res1){
        this.imageType=this.form.imageType;
        // this.dialogImagesVisible=false;
        this.axios.post("/system/images?file="+res1+"&imageType="+this.imageType).then(res=>{
          console.log(res.data);
          this.form.name=res.data.name;
          if (res.data.name!=null){
            this.loadFlag=true;
            setTimeout(()=>{
              this.loadFlag=false;
            },500);
          }
        })
      },
      //查看天气预报
      OpenWeather(typeName){
        console.log(typeName);
        this.weatherData={};
        this.title=typeName;
        this.axios.get("/system/weather?type="+typeName).then(res=>{
          // if (res.data.code==200){
          //    this.weatherData=res.data;
          // }
          const  weatherData = JSON.parse(res.data.data);
          // eslint-disable-next-line
          // const temperature = weatherData.temperature;
          // // eslint-disable-next-line
          // const dondition = weatherData.dondition;
          console.log(weatherData);
          console.log(weatherData.result);
          console.log(weatherData.result.future);
          const weathers = weatherData.result.future;
          const realtime = weatherData.result.realtime;
          const weather = weathers[0];
          // console.log(weather)
          this.weatherData=weather;
          this.realtime=realtime;
          // sessionStorage.setItem("date",weather.date)
          // sessionStorage.setItem("direct",weather.direct)
          // sessionStorage.setItem("temperature",weather.temperature)
          // sessionStorage.setItem("weather",weather.weather)
        })
        this.dialogWeatherTableVisible=true;
      },
      handleAvatarSuccess(res1,file){
        this.imageUrl=URL.createObjectURL(file.raw);
        this.doOCR(res1);
        this.form.picUrl=res1;
      },
      beforeAvatarUpload(file){
        const isJPG = file.type==='image/jpeg';
        const isLt2M = file.size/1024/1024<2;

        if (!isJPG){
          this.$message.error('上传头像只能是JPG格式！');
        }
        if (!isLt2M){
          this.$message.error('上传头像图片大小不能超过2MB!');
        }
        return isJPG && isLt2M;
      },
      //查询零售商的类型
      getStoreType(){
        this.axios.post("/system/selectStoreType").then(res=>{
          this.storeType=res.data.data;
        })
      },
      //生成Echar
      OpenRetailersEchar(){
          this.dialogShowRetailersVisible = true;
          this.$nextTick(() => {
            this.openRetailers();
          })
      },
      openRetailers(){
        let formData = [];
        let ydata = [];
        let xdata = [];


        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        this.axios.post("/system/selectEchar").then(res=>{
          formData=res.data;
          console.log(formData)

          ydata = formData.data.map(item=>item.ydata);
          xdata = formData.data.map(item=>item.xdata);

          const option = {
            xAxis: {
              type: 'category',
              data: xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: ydata,
                type: 'bar'
              }
            ]
          };
          option && myChart.setOption(option);
        });
      },
      OpenretailersExcel(){
          window.open("http://192.168.137.1:9017/retailersExcel");
      },
      getProduct(){
          this.axios.get("/system/getArgpTradesmanProducts").then(res=>{
            this.product=res.data.data;
          })
      },
      goSize(size){
        this.size=size;
        this.getTableData();
      },
      goPage(current){
        this.current=current;
        this.getTableData();
      },
      getTableData() {
          this.axios.get("/system/getArgpTradesmanRetailers",{params:{
              current:this.current,
              size:this.size,
              name:this.formInline.name}}).then(res=>{
              this.tableData=res.data.data.list;
              this.total=res.data.data.total;
          })
      },
      OpenAddRestailers(row){
        this.cityIds=[0,0,0];
        if (row){
          this.title="编辑零售商";
          this.form=row;
          this.imageUrl=row.picUrl;
          if (row.cityId){
            this.cityIds=[row.pid,row.cityId,row.type];
          }
          this.dialogFormVisible=true;
        }else {
          this.title="添加零售商";
          this.cityIds=[0,0,0];
          this.imageUrl='';
          this.form={
            name:'',
            address:'',
            contactInfo:'',
            location:'',
            storeType:'',
            opeingHours:'',
            inventoryLevel:'',
            productId:'',
            cityId:'',
            pid:'',
            type:'',
            profitMargin:'',
          },
          this.dialogFormVisible=true;
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           //修改零售商
            if (this.form.retailerId!=undefined){
              this.axios.post("system/updateArgpTradesmanRetailers",this.form).then(res=>{
                if (res.data.code==200){
                  this.$message.success("修改成功");
                  this.dialogFormVisible=false;
                  this.getTableData();
                }else {
                  this.$message.error("修改失败");
                }
              })
            }else {
              //添加零售商
              this.axios.post("/system/addArgpTradesmanRetailers",this.form).then(res=>{
                if (res.data.code==200){
                  this.$message.success(res.data.msg);
                  this.dialogFormVisible=false;
                  this.getTableData();
                }else {
                  this.$message.error(res.data.msg);
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      delRetailersById(id){
        console.log(id)
        this.axios.post("/system/delArgpTradesmanRetailersById?retailerId="+id).then(res=>{
          if (res.data.code==200){
            this.$message.success(res.data.msg);
            this.getTableData();
          }else {
            this.$message.error(res.data.msg);
          }
        })
      },
      getCityTree(){
        this.axios.post("/system/listCityTree").then(res=>{
          this.citys=res.data;
        })
        console.log(this.citys)
      },
      cityChange(value){
        console.log(value);
        if (value.length>0){
            console.log("有值")
            this.form.pid=value[0],
            this.form.cityId=value[1];
            this.form.type=value[2];
            console.log(value)
        }else {
          console.log("没有值@@@@")
        }
      }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>